<template>
    <div>
        <header>
            <span style="font-size: 16px">我的购物车</span>
            <span style="color: #999;font-size: 12px;"> 共3门课程</span>
        </header>
        <div class="biaoqian">
            <dl class="cart-table">
                <dt>
                    <div>
                        <input type="checkbox" class="i" style="margin: 0px 5px">
                        <span>全选</span>
                    </div>
                </dt>
                <dt>课程名称</dt>
                <dt>原价</dt>
                <dt>优惠</dt>
                <dt>操作</dt>
            </dl>
        </div>

        <div v-for="(item,index) in shoppingCartList" :key="index">
            <a-row style=" border: 1px solid #e8e8e8;
        margin: 20px 0;
        padding: 10px 0;line-height: 90px">
                <a-col :span="6">
                    <div>
                        <input type="checkbox" class="i" style="margin: 0px 10px">
                        <img :src="item.course.bannerFileUrl" alt="">
                    </div>
                </a-col>
                <a-col :span="6">
                    {{item.course.courseTitle}}
                </a-col>
                <a-col :span="4">
                    <span>￥{{item.course.coursePrice}}</span>
                    <span>￥{{item.course.discountPrice}}</span>
                </a-col>
                <a-col :span="4">
                    <span>限时钜惠</span>
                </a-col>
                <a-col :span="4">
                    <a-icon type="delete" style="color: red" />
                </a-col>
            </a-row>
        </div>
        <div class="total">
            <div style="padding: 20px 10px" class="other">
                <input type="checkbox" class="i">
                <span>全选</span>
            </div>
            <div class="sontotal" style="float: right">
                <span>合计:</span>
                <span style="font-size: 20px;color: #ff3900;">￥0.00</span>
                <div class="sontotal" style="font-size: 20px;
                text-align: center;
                line-height: 40px;
                width: 120px;
                height: 60px;
                color: #fff;
                margin-top: -11px;
                background-color:#ccc;
            ">提交</div>
            </div>
        </div>
    </div>
</template>

<script>
    import {listShoppingCart }from "../api/api"
    export default {
        name: "myShoppingCart",
        data(){
            return{
                shoppingCartList:[],
            }
        },
        created() {
            //    请求我的购物车接口
            listShoppingCart().then(res => {
                console.log(res)
                this.shoppingCartList = res.shoppingCartList
            })
        }

    }
</script>

<style scoped>
    .container{
        padding: 10px 180px ;
    }
    dl dt{
        float: left;
    }
    .biaoqian{
        border: 1px solid #e8e8e8;
        height: 50px;
        line-height: 50px;
        background: #fafafa;
    }
    .cart-table dt{
        width: 200px;
        text-align: left;
        padding: 0 0 0 10px;
        font-size: 16px;
    }
    .i{
        width: 15px;
        height: 15px;
        background-color: white;
        border: 1px solid #00CF8C;
    }
    img{
        width: 150px;
        height: 100px;
    }
    .total{
        background-color: #eee;
        border: 1px solid #e4e4e4;
        border-right: 0;
        height: 60px;
        margin: 20px 0;
    }
    .sontotal{
        display: inline-block;
        padding: 10px 20px;
    }
    .other{
        display: inline-block;
    }
</style>